<template>
  <view class="container">
    <view class="header">
      <text class="time">
        2024-05 ^
      </text>
    </view>
    <view class="body">
      <view class="item">
        <view v-if="isClient" class="item-issue-time">联系时间：2023-03-12 12:00</view>
        <view v-if="isClient" class="item-main">
          <image src="/static/images/Rectangle715@2x.png" mode=""></image>
          <view class="item-userinfo">
            <text style="margin-bottom: 20rpx;">七侠镇</text>
            <text>13711111111</text>
          </view>
        </view>
        <view v-else class="item-main1">
          <view class="item-userinfo1">
            <text style="margin-bottom: 20rpx; margin-right: 30rpx;">七侠镇</text>
            <text>13711111111</text>
          </view>
          <view class="contact-time">
            联系时间：2023-03-12 12:00
          </view>
        </view>
      </view>


    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isClient: true
      };
    },
    onLoad({
      isClient
    }) {
      this.isClient = isClient
    }
  }
</script>

<style lang="scss">
  .container {
    padding: 0 30rpx;
  }

  .header {
    border-top: 1rpx #eee solid;
    padding: 30rpx;

    .time {
      display: inline-block;
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      border: 1rpx solid #999999;
      padding: 12rpx 18rpx;
    }
  }


  .item {
    box-shadow: 0rpx 1rpx 20rpx 0rpx rgba(182, 182, 182, 0.15);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 40rpx 30rpx;
    font-size: 26rpx;
    color: #999999;
    margin-bottom: 30rpx;


    .item-issue-time {
      padding: 0 0 40rpx;
      border-bottom: 1rpx #999 dotted;
    }

    .item-main {

      font-size: 26rpx;
      color: #000000;
      display: flex;
      align-items: center;
      padding-top: 30rpx;

      image {
        width: 100rpx;
        height: 100rpx;
        margin-right: 40rpx;
      }

      .item-userinfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

    }

    .item-main1 {
      font-size: 26rpx;
      color: #000000;

      .contact-time {
        font-size: 26rpx;
        color: #999999;
        margin-top: 20rpx;
      }
    }
  }
</style>
